<template>
  <div class="col main-content">
    <el-row :gutter="30" class="tool-bar">
      <el-col :span="24">
        <div class="inline-item">
          <el-input v-model="key" clearable style="width: 200px;" placeholder="请输入查询信息"/>
          <el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
          <el-button type="primary" @click="createCategory"><i class="fa fa-cubes"></i> 添加分类</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="24">
        <el-table
          :data="categories"
          border
          tooltip-effect="dark"
          v-loading="loading"

        >
          <el-table-column
            label="ID" width="80"
          >
            <template slot-scope="scope">
              <div class="center">
                <span>{{scope.row.id}}</span>
              </div>
            </template>
          </el-table-column>
          <h-tree-grid
            label="名称"
            prop="name"
            :remote="remote"
          >
          </h-tree-grid>
          <el-table-column label="英文名称" prop="enName">
          </el-table-column>
          <el-table-column label="描述" prop="descript">
          </el-table-column>
          <el-table-column width="90px"
                           label="状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.isShow==1" class="el-alert el-alert--success is-center">
                显示
              </div>
              <div v-else class="el-alert el-alert--error is-center">
                已隐藏
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="addSubCategory">添加子分类</el-button>
              <el-button v-if="scope.row.isShow==0" type="text" size="mini"
                         @click="changeStatus(scope.$index, scope.row)">
                显示
              </el-button>
              <el-button v-else="scope.row.isShow==1" size="mini" type="text"
                         @click="changeStatus(scope.$index, scope.row)">
                隐藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<style>

</style>
<script>
  import HTreeGrid from 'src/components/common/HTreeGrid'
  import AdminService from 'src/service/admin'

  export default {
    name: 'AdminCategory',
    components: {HTreeGrid},
    data() {
      return {
        categories: [],
        loading: false,
        key: ''
      }
    },
    methods: {
      createCategory: function () {
        this.$router.push('/admin/goods/category/create.html')
      },
      getData: function (id) {
        const me = this
        me.loading = true
        AdminService.goodCategory(id).then(datas => {
          if (datas != null) {
            me.categories = datas.datas
          }
          me.loading = false
        })
      },
      //添加子分类
      addSubCategory: function () {

      },
      remote: function (data, fun) {
        const me = this
        AdminService.goodCategory(data.id).then(datas => {
          if (datas != null) {
            fun(datas.datas)
          }
        })

      },
      search: function () {
        const me = this
        me.loading = true

      }
    },
    mounted: function () {
      this.getData(0)
    }
  }
</script>
